<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告图轮换插件演示</title>
    <style>
        .banner {
            position: relative;
            width: 100%;
            height: 320px;
            background-color: #dadee9;
            overflow: hidden;
            text-align: center
        }

        .banner ul {
            position: relative;
            left: -100%
        }

        .banner ul a {
            text-align: center
        }

        .banner ul img {
            vertical-align: bottom
        }

        .banner li {
            float: left
        }

        .banner .dots {
            position: absolute;
            bottom: 10px;
            left: 50%
        }

        .banner .dots li {
            display: inline-block;
            width: 17px;
            height: 17px;
            margin: 0 4px;
            text-indent: -999em;
            cursor: pointer;
            background: url(../images/pro_icon.png)  -455px -181px no-repeat
        }

        .banner .dots li.cur, .banner .dots li:hover {
            background-position: -435px -181px
        }

        .banner .p-n a {
            top: 50%;
            left: 50%;
            position: absolute;
            display: block;
            width: 72px;
            height: 72px;
            text-indent: -999em
        }

        .banner .p-n .prev {
            margin-left: -500px;
            background: url(../images/pro_icon.png) -247px -8px no-repeat;
            _background: url(../images/index_spirit.png) 0 -6px no-repeat
        }

        .banner .p-n .prev:hover {
            background-position: -419px -92px;
            _background-position: -76px -6px
        }

        .banner .p-n .next {
            margin-left: 428px;
            background: url(../images/pro_icon.png) -419px -8px no-repeat;
            _background: url(../images/index_spirit.png) -150px -6px no-repeat
        }

        .banner .p-n .next:hover {
            background-position: -334px -8px;
            _background-position: -226px -6px
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul>
            <li>
                <a href="http://www.zhonghuasuan.com/" target="_blank">
                    <img src="http://img.zhonghuasuan.com/merchant/2015/03/114cb526485fda27bf0337aa94e00258.png" alt="焦点1" title="焦点1">
                </a>
            </li>
            <li>
                <a href="http://www.zhonghuasuan.com/" target="_blank">
                    <img src="http://b.hiphotos.baidu.com/zhidao/wh%3D800%2C450/sign=1a9975f945a98226b894232fbab29535/314e251f95cad1c856db0bab793e6709c83d51de.jpg" alt="焦点2" title="焦点2">
                </a>
            </li>
            <li>
                <a href="http://www.zhonghuasuan.com/" target="_blank">
                    <img src="http://g.hiphotos.baidu.com/zhidao/wh%3D800%2C450/sign=bd909d99494a20a4314b34cfa062b416/a50f4bfbfbedab64fdc9884bf136afc378311e86.jpg" alt="焦点2" title="焦点2">
                </a>
            </li>
        </ul>
        <ol class="dots">
        </ol>
        <div class="p-n">
            <a target="_self" class="prev" href="javascript:;">上一张</a>
            <a target="_self" class="next" href="javascript:;">下一张</a>
        </div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
<script src="myslide.js"></script>
<script>
    $(function(){
        //调用方法
        $(".banner").slide({});
    })
</script>
</html>